<template>
	<view class="container">
		<view class="pay-heared">
			<view class="pay-tips">
				您的订单已生成，请等待商家确认
			</view>
			<view class="pay-dis">
				支付金额：<text>{{globalExchangeRate}}{{orderInfo.payprice}}</text>
			</view>
		</view>
		<view class="pay-info">
			<view class="pay-info-item">
				<view class="hd">
					产品名称：
				</view>
				<view class="bd" v-if="orderInfo.productname">
					{{orderInfo.productname}}<text v-if="orderInfo.suit_name">（{{orderInfo.suit_name}}）</text>
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					产品编号：
				</view>
				<view class="bd" v-if="orderInfo.series">
					{{orderInfo.series}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					订单号：
				</view>
				<view class="bd" v-if="orderInfo.ordersn">
					{{orderInfo.ordersn}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					下单时间：
				</view>
				<view class="bd"  v-if="orderInfo.addtime">
					{{ orderInfo.addtime}}
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<footer-fixed-bar :isShadow="false" :isBackground="false">
			<view class="footer-alone-btn-default" @click="toOrderDetail">
				<view class="text">查看订单</view>
			</view>
		</footer-fixed-bar>
	</view>
</template>

<script>
	import footerFixedBar from "@/components/footer-fixed-bar.vue"
	import {getOrderDetailPage} from "@/utils/toPath.js"
	export default {
		components: {
			footerFixedBar
		},
		data() {
			return {
				orderInfo:{}
			}
		},
		onLoad(options) {
			if (options.orderid) {
				this.id = options.orderid;
				this.getOrderDetail();
			} else {
				uni.showToast({
					title: '参数信息有误',
					icon: 'none'
				})
			}
		},
		methods: {
			// 获取订单详情
			async getOrderDetail() {
				let params = {
					method: 'api/v2/order/detail',
					id: this.id
				};
				uni.showLoading({
					title: '加载中...'
				})
				let res = await this.$http(params);
				uni.hideLoading();
				if (res.status) {
					this.orderInfo = res.data;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			// 前往订单详情页面
			toOrderDetail(){
				if(this.orderInfo.id)
				{
					let pageParams = {
						pid :this.orderInfo.productautoid,
						orderid : this.orderInfo.id,
						typeid : this.orderInfo.typeid,
						title : this.orderInfo.productname
					};	
					let url = getOrderDetailPage(this.orderInfo.typeid,pageParams);
					if(url)
					{
						uni.redirectTo({
							url: url
						})
					}
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
	}
	.pay-heared {
		height: 100rpx;
		padding: 50rpx 24rpx 50rpx;
		background: url(https://static.member.stourweb.cn/uniapp/static/images/h5_pay_bg.jpg) center no-repeat;
		background-size: cover;
		.pay-tips{
			font-size: $uni-font-size-sm;
			color: $uni-text-color-inverse;
			margin-bottom: $uni-spacing-col-sm;
		}
		.pay-dis {
			font-size: 32rpx;
			color: $uni-text-color-inverse;
			text {
				color: #fff100;
			}
		}
	}

	.pay-info {
		margin: 0 $uni-spacing-col-lg;
		background: $uni-bg-color;
		border-radius: 8rpx;
		padding: $uni-spacing-row-sm;
		position: relative;
		display: block;
		z-index: 1;
		top: -28rpx;

		.pay-info-item {
			display: flex;
			font-size: $uni-font-size-base;
			padding: 16rpx 0;

			.hd {
				color: $uni-text-color-grey;
				width: 144rpx;
				flex: 0 0 auto;
			}

			.bd {
				color: $uni-text-color;
				word-break: break-all;
				flex: 1 1 auto;
			}
		}
	}

	// 底部独立按钮
	.footer-alone-btn-default{
		text-align: center;
		padding: 0 25rpx 22rpx;
		background: $uni-bg-color-grey;
		.text{
			background:$uni-bg-color-primary;
			padding: 30rpx 0;
			color: $uni-text-color-inverse;
			border-radius: $uni-border-radius-lg;
			font-size: $uni-font-size-lg;
		}
	}
</style>
